<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .time{
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body class="dolphin-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
        <div class="layui-card">
        <div class="layui-card-header ">CPU<span class="time"></span></div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>核心数</td>
                        <th th:text="${server.cpu.cpuNum}"></th>
                    </tr>
                    <tr >
                        <td rowspan="3" colspan="2">
                            <div id="cpu" style="width: 100%;height: 120px"> </div>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">内存<span class="time"></span></div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>内存</th>
                        <th>JYM</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>总内存</td>
                        <th th:text="${server.mem.total}"></th>
                        <th th:text="${server.jvm.total}"></th>
                    </tr>
                    <tr>
                        <td rowspan="3" colspan="3">
                            <div id="mem" style="width: 100%;height: 120px"> </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">服务器信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                    </colgroup>

                    <tbody>
                    <tr>
                        <td>服务器名称</td>
                        <th th:text="${server.sys.computerName}"></th>
                        <td>操作系统</td>
                        <th th:text="${server.sys.osName}"></th>
                    </tr>
                    <tr>
                        <td>服务器IP</td>
                        <th th:text="${server.sys.computerIp}"></th>
                        <td>系统架构</td>
                        <th th:text="${server.sys.osArch}"></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">Java虚拟机信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>Java名称</td>
                        <th th:text="${server.jvm.name}"></th>
                        <td>Java版本</td>
                        <th th:text="${server.jvm.version}"></th>
                    </tr>
                    <tr>
                        <td>启动时间</td>
                        <th th:text="${server.jvm.startTime}"></th>
                        <td>运行时长</td>
                        <th th:text="${server.jvm.runTime}"></th>
                    </tr>
                    <tr>
                        <td>安装路径</td>
                        <th th:text="${server.jvm.home}"></th>
                        <td>项目路径</td>
                        <th th:text="${server.sys.userDir}"></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body layui-text">
                <table class="layui-table">
                    <colgroup>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>安装目录</th>
                        <th>磁盘类型</th>
                        <th>名称</th>
                        <th>容量大小</th>
                        <th>已用容量</th>
                        <th>未用容量</th>
                        <th>已用容量率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="item:${server.sysFiles}">
                        <th th:text="${item.dirName}"></th>
                        <th th:text="${item.sysTypeName}"></th>
                        <th th:text="${item.typeName}"></th>
                        <th th:text="${item.total}"></th>
                        <th th:text="${item.used}"></th>
                        <th th:text="${item.free}"></th>
                        <th th:text="${item.usage}+'%'"></th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/plugins/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script th:inline="javascript">
    var monitorTime = [[${#params.value("monitor_time")}]];
    if(!monitorTime){
        monitorTime = 2;
    }
    $(".time").text("("+monitorTime+"秒刷新一次)");
    getData();
    setInterval("getData()",monitorTime*1000);

    function getData() {

        $.get("/monitor/server", function (datas) {
            if (datas.code == 200){
                createCpu(datas.data.cpu);
                createMem(datas.data);
            }
        })
    }

 function createCpu(data) {
     var dom = document.getElementById("cpu");
     var myChart = echarts.init(dom);
     var  option = {
         tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         legend: {
             orient: 'vertical',
             left: 10,
             data: ['系统使用率', '用户使用率', '当前空闲率']
         },
         series: [
             {
                 name: 'CPU',
                 type: 'pie',
                 radius: ['50%', '70%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     label: {
                         show: true,
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 },
                 labelLine: {
                     show: false
                 },
                 data: [
                     {value: data.sys, name: '系统使用率'},
                     {value: data.used, name: '用户使用率'},
                     {value: data.free, name: '当前空闲率'},
                 ]
             }
         ]
     };

     myChart.setOption(option, true);
 }
    function createMem(data) {
        var dom = document.getElementById("mem");
        var myChart = echarts.init(dom);
        var  option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['已用内存', '空闲内存']
            },
            series: [
                {
                    name: '系统内存',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['45%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: data.mem.used, name: '已用内存'},
                        {value: data.mem.free, name: '空闲内存'},

                    ]
                },
                {
                    name: 'JVM内存',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['75%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: data.jvm.used, name: '已用内存'},
                        {value: data.jvm.free, name: '空闲内存'},

                    ]
                }
            ]
        };

        myChart.setOption(option, true);
    }
</script>
</body>
</html>

